<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#id1
			{
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn1" onclick="btnClick()">按钮1</button>
		<button type="button" id="btn2" onclick="btnClick2()">按钮2</button>
		<button type="button" id="btn3" onclick="btnClick3()">按钮3</button>
		<button type="button" id="btn4">按钮4</button>
		<button type="button" id="btnAdd" onclick="myaddlistener()">为按钮4添加监听器</button>
		<button type="button" id="btnRemove" onclick="myremovelistener()">清除按钮4监听器</button>
		<div id="id1" onclick="divClick()" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="movediv();"></div>
	</body>
	<script type="text/javascript">
	function divClick()
	{
		console.log('胡津华傻狗!');
	}
	function btnClick()
	{
		console.log('按钮被点击了');
	}
	document.getElementById('btn2').onclick = btnClick;
	document.getElementById('btn3').onclick = function()
	{
		console.log('按钮3被点击了');
	}
	function enterdiv()
	{
		console.log('鼠标进入div');
		document.getElementById('id1').style.backgroundColor = 'blue';
	}
	function leavediv()
	{
		console.log('鼠标离开div');
		document.getElementById('id1').style.backgroundColor = 'red';
	}
	function movediv()
	{
		console.log('鼠标在div中移动');
	}
	function myaddlistener()
	{
		document.getElementById('btn4').addEventListener('click',btnClick);
	}
	function myremovelistener()
	{
		document.getElementById('btn4').removeEventListener('click',btnClick);
	}
	</script>
</html>
